<template>
  <div class="system-tray" @click.stop>
    <!-- 网络 -->
    <div class="tray-icon" @click="toggleNetworkPanel" title="网络">
      <svg v-if="networkType==='wifi'" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="16" r="1.5" fill="#0078d7"/><path d="M4 10a8 8 0 0 1 12 0" stroke="#0078d7" stroke-width="1.5" fill="none"/><path d="M6.5 12.5a5 5 0 0 1 7 0" stroke="#0078d7" stroke-width="1.5" fill="none"/></svg>
      <svg v-else width="20" height="20" viewBox="0 0 20 20"><rect x="4" y="14" width="12" height="2" rx="1" fill="#aaa"/></svg>
    </div>
    <!-- 输入法 -->
    <div class="tray-icon" @click="toggleImePanel" title="输入法">{{ ime }}</div>
    <!-- 电量 -->
    <div class="tray-icon" title="电量">
      <svg width="20" height="20" viewBox="0 0 20 20">
        <rect x="4" y="6" width="12" height="8" rx="2" :fill="batteryColor"/>
        <rect x="16" y="9" width="2" height="2" rx="1" :fill="batteryColor"/>
        <rect x="5" y="7" :width="batteryWidth" height="6" rx="1" fill="#fff"/>
      </svg>
      <span class="battery-text">{{ batteryLevel }}%</span>
    </div>
    <!-- 音量 -->
    <div class="tray-icon" @click="toggleVolumePanel" title="音量">
      <svg width="20" height="20" viewBox="0 0 20 20"><rect x="3" y="8" width="4" height="4" rx="1" fill="#0078d7"/><rect x="7" y="6" width="2" height="8" rx="1" fill="#0078d7"/><path d="M11 8a3 3 0 0 1 0 4" stroke="#0078d7" stroke-width="1.5" fill="none"/></svg>
      <span class="volume-text">{{ volume }}</span>
    </div>
    <!-- 时间 -->
    <div class="time">{{ time }}</div>

    <!-- 网络弹框 -->
    <div v-if="showNetworkPanel" class="network-panel" @click.stop>
      <div class="network-header">
        <button @click="toggleNetworkPanel">×</button>
      </div>
      <div class="network-content">
        <div class="network-row">
          <button class="net-btn" :class="{active: wifi}" @click="toggleWifi">WiFi</button>
          <button class="net-btn" :class="{active: bluetooth}" @click="toggleBluetooth">蓝牙</button>
          <button class="net-btn" :class="{active: airplane}" @click="toggleAirplane">飞行模式</button>
        </div>
        <div class="network-row">
          <div class="net-status">{{ wifi ? '已连接' : '未连接' }}</div>
          <div class="net-status">{{ bluetooth ? '蓝牙开' : '蓝牙关' }}</div>
          <div class="net-status">{{ airplane ? '飞行模式开' : '飞行模式关' }}</div>
        </div>
        <div class="network-row">
          <div>可用网络：</div>
          <ul>
            <li v-for="n in networks" :key="n.ssid" @click="connectNetwork(n)">
              {{ n.ssid }} <span v-if="n.connected">(已连接)</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 音量弹框 -->
    <div v-if="showVolumePanel" class="volume-panel" @click.stop>
      <input type="range" min="0" max="100" v-model="volume" @input="setVolume" />
    </div>
    <!-- 输入法弹框 -->
    <div v-if="showImePanel" class="ime-panel" @click.stop>
      <div v-for="i in imeList" :key="i" @click="switchIme(i)">{{ i }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  time: {
    type: String,
    default: ''
  }
})

// 网络
const showNetworkPanel = ref(false)
const wifi = ref(true)
const bluetooth = ref(false)
const airplane = ref(false)
const networkType = ref('wifi')
const networks = ref([
  { ssid: '热点', connected: true },
  { ssid: '家里WiFi', connected: false },
  { ssid: '公司WiFi', connected: false }
])
function toggleNetworkPanel() { showNetworkPanel.value = !showNetworkPanel.value }
function toggleWifi() { wifi.value = !wifi.value }
function toggleBluetooth() { bluetooth.value = !bluetooth.value }
function toggleAirplane() { airplane.value = !airplane.value }
function connectNetwork(n) {
  networks.value.forEach(net => net.connected = false)
  n.connected = true
}

// 输入法
const showImePanel = ref(false)
const ime = ref('中')
const imeList = ref(['中', 'EN'])
function toggleImePanel() { showImePanel.value = !showImePanel.value }
function switchIme(i) { ime.value = i; showImePanel.value = false }

// 电量
const batteryLevel = ref(95)
const batteryColor = computed(() => batteryLevel.value > 20 ? '#0078d7' : '#e81123')
const batteryWidth = computed(() => 10 * batteryLevel.value / 100)
let trayEl = null
onMounted(() => {
  trayEl = document.querySelector('.system-tray')
  document.body.addEventListener('click', handleBodyClick)
  if (navigator.getBattery) {
    navigator.getBattery().then(bat => {
      batteryLevel.value = Math.round(bat.level * 100)
      bat.addEventListener('levelchange', () => {
        batteryLevel.value = Math.round(bat.level * 100)
      })
    })
  }
})
onBeforeUnmount(() => {
  document.body.removeEventListener('click', handleBodyClick)
})
function handleBodyClick(e) {
  if (!trayEl.contains(e.target)) {
    showNetworkPanel.value = false
    showVolumePanel.value = false
    showImePanel.value = false
  }
}

// 音量
const showVolumePanel = ref(false)
const volume = ref(50)
function toggleVolumePanel() { showVolumePanel.value = !showVolumePanel.value }
function setVolume() {
  // 仅模拟，真实音量需调用原生API
}
</script>

<style scoped lang="scss">
.system-tray {
  margin-left: auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: white;
  font-size: 12px;
  gap: 8px;
  position: relative;
  .tray-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
    transition: background .2s;
    position: relative;
    &:hover { background: rgba(0,120,215,0.15); }
    svg { display: block; }
    .battery-text, .volume-text { margin-left: 2px; font-size: 11px; color: #fff; }
  }
  .time {
    min-width: 48px;
    text-align: right;
    font-size: 13px;
    font-family: consolas, monospace;
  }
  .network-panel {
    position: absolute;
    right: 0;
    top: auto;
    bottom: 38px + 8px;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 32px #0002;
    color: #222;
    z-index: 100;
    padding: 12px 18px 18px 18px;
    .network-header { display: flex; justify-content: flex-end; }
    .network-content { margin-top: 8px; }
    .network-row { display: flex; gap: 12px; margin-bottom: 10px; align-items: center; }
    .net-btn {
      background: #f3f6fb;
      border: none;
      border-radius: 8px;
      padding: 6px 18px;
      font-size: 15px;
      cursor: pointer;
      &.active { background: #0078d7; color: #fff; }
    }
    .net-status { font-size: 13px; color: #0078d7; }
    ul { margin: 0; padding: 0; list-style: none; }
    li { padding: 4px 0; cursor: pointer; &:hover { color: #0078d7; } }
  }
  .volume-panel {
    position: absolute;
    right: 40px;
    top: auto;
    bottom: 38px + 8px;
    width: 120px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px #0002;
    color: #222;
    z-index: 100;
    padding: 12px 18px;
    input[type="range"] { width: 100%; }
  }
  .ime-panel {
    position: absolute;
    right: 80px;
    top: auto;
    bottom: 38px + 8px;
    min-width: 60px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px #0002;
    color: #222;
    z-index: 100;
    padding: 8px 0;
    div { padding: 6px 18px; cursor: pointer; &:hover { background: #e3eefd; } }
  }
}
</style>